<template>
  <div class="message-option-line">
    <div class="left-part">
      <div class="option" @click="thumbUpIconClick"
           :class="{thumbUpActive: isThumbUp}"
      >
        <el-icon><svg fill="currentColor" t="1640692436853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6186" width="200" height="200"><path d="M873.6 416h-188.8c12.8-44.8 28.8-115.2 19.2-188.8-6.4-60.8-41.6-105.6-92.8-124.8-38.4-12.8-76.8-6.4-99.2 16-25.6 25.6-38.4 76.8-51.2 128-9.6 35.2-16 70.4-28.8 89.6-32 54.4-102.4 76.8-115.2 80H224c-19.2 0-32 12.8-32 32v448c0 19.2 12.8 32 32 32h547.2C896 928 960 537.6 960 515.2c0-57.6-44.8-99.2-86.4-99.2zM96 416c-19.2 0-32 12.8-32 32v448c0 19.2 12.8 32 32 32s32-12.8 32-32V448c0-19.2-12.8-32-32-32z" p-id="6187"></path></svg></el-icon>
      </div>
      <div class="option" @click="thumbDownIconClick"
           :class="{thumbDownActive: isThumbDown}"
      >
        <el-icon><svg fill="currentColor" t="1640692634249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6357" width="200" height="200"><path d="M725.333333 106.666667H256c-12.8 0-21.333333 8.533333-21.333333 21.333333v448c0 12.8 8.533333 21.333333 21.333333 21.333333h70.4c10.666667 4.266667 89.6 27.733333 123.733333 87.466667 10.666667 19.2 21.333333 55.466667 29.866667 91.733333 12.8 51.2 23.466667 98.133333 46.933333 123.733334 12.8 12.8 32 19.2 53.333334 19.2 12.8 0 23.466667-2.133333 36.266666-6.4 46.933333-17.066667 78.933333-59.733333 87.466667-115.2 10.666667-81.066667-10.666667-157.866667-23.466667-200.533334h183.466667c36.266667 0 78.933333-38.4 78.933333-85.333333-4.266667-6.4-12.8-405.333333-217.6-405.333333zM170.666667 106.666667H106.666667c-12.8 0-21.333333 8.533333-21.333334 21.333333v448c0 12.8 8.533333 21.333333 21.333334 21.333333h64c12.8 0 21.333333-8.533333 21.333333-21.333333V128c0-12.8-10.666667-21.333333-21.333333-21.333333z" p-id="6358"></path></svg></el-icon>
      </div>
      <div class="option" @click="replyIconClick"
           :class="{replyActive: showReplyInput}"
      >
        <el-icon> <svg fill="currentColor" t="1640854075477" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2145" width="200" height="200"><path d="M415.937331 320 415.937331 96 20.001331 438.176C-6.718669 461.28-6.622669 498.784 20.033331 521.824L415.937331 864 415.937331 640C639.937331 640 847.937331 688 1023.937331 928 943.937331 480 607.937331 320 415.937331 320" p-id="2146"></path></svg></el-icon>
        {{ getReplyIconMessage() }}
      </div>
    </div>
    <div class="right-part">
      <div v-if="byLoginUser === '1'" class="option" @click="deleteIconClick"
      >
        <el-icon><svg fill="currentColor" t="1640857590135" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11932" width="200" height="200"><path d="M397.88544 418.1504v337.92A18.15552 18.15552 0 0 1 378.88 774.81984h-38.0928a18.15552 18.15552 0 0 1-18.9952-18.80064v-337.92A18.15552 18.15552 0 0 1 340.7872 399.36h37.98016a18.15552 18.15552 0 0 1 18.98496 18.7904H397.88544z m152.1664 0v337.92a18.15552 18.15552 0 0 1-19.05664 18.7392h-37.98016a18.15552 18.15552 0 0 1-18.98496-18.80064v-337.92A18.15552 18.15552 0 0 1 493.01504 399.36h37.98016a18.15552 18.15552 0 0 1 18.98496 18.7904h0.06144z m152.15616 0v337.92a18.15552 18.15552 0 0 1-19.05664 18.7392h-37.98016a18.15552 18.15552 0 0 1-18.98496-18.80064l-0.06144-337.92A18.15552 18.15552 0 0 1 645.10976 399.36h38.0416a18.15552 18.15552 0 0 1 18.98496 18.7904h0.07168z m76.01152 424.7552V286.72H245.78048V842.8544a65.8432 65.8432 0 0 0 12.7488 39.64928c2.9696 3.34848 5.08928 4.95616 6.2464 4.95616h494.45888c1.15712 0 3.21536-1.60768 6.2464-4.95616a65.8432 65.8432 0 0 0 12.8-39.58784h-0.06144z m-399.32928-631.296H645.12l-28.50816-68.608a16.73216 16.73216 0 0 0-10.10688-6.4512H418.08896c-4.0448 0.82944-7.63904 3.1232-10.09664 6.4512L378.88 211.59936zM930.38592 230.4v37.5296A18.15552 18.15552 0 0 1 911.39072 286.72h-57.088V842.8544c0 32.50176-9.2672 60.49792-27.93472 84.25472C807.70048 950.72256 785.36704 962.56 759.23456 962.56H264.77568c-26.13248 0-48.5376-11.45856-67.13344-34.304-18.66752-22.91712-27.93472-50.5856-27.93472-83.03616V286.72h-57.09824a18.15552 18.15552 0 0 1-18.98496-18.7904V230.4a18.15552 18.15552 0 0 1 18.98496-18.7904h183.64416l41.64608-97.96608c5.91872-14.4896 16.59904-26.7776 32.0512-36.94592C385.39264 66.52928 401.1008 61.44 416.93184 61.44h190.13632c15.84128 0 31.5392 5.08928 46.99136 15.2576 15.45216 10.16832 26.13248 22.528 32.0512 36.94592l41.64608 97.96608h183.63392a18.15552 18.15552 0 0 1 18.9952 18.7904z" p-id="11933"></path></svg></el-icon>
      </div>
    </div>
  </div>
  <el-collapse-transition>
    <div v-if="showReplyInput">
      <div style="height: 10px;"></div>
      <div class="input_container">
        <el-input
            id="replyInput"
            v-model="replyContent"
            autosize
            :rows="1"
            type="textarea"
            :placeholder="'回复 '+replyMessage.userto_nickname"
        />
        <el-button @click="replyBtnClick" type="warning" size="small" style="margin-left: 10px">回复</el-button>
      </div>
    </div>
  </el-collapse-transition>
</template>

<script>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {currentLoginData, putLoginPrompt} from "@/assets/js/common";
import {postCommentReply} from "@/network/comment_reply";
import {ElMessage} from "element-plus";
// 带点赞、踩和回复功能
export default {
  name: "MessageOptionLine",
  props: {
    replyMessage: {
      type: Object,
      default: {
        comment_id: "0",            // 评论id
        userto_userId: "0",         // 目标用户ID
        userto_nickname: "nickName" // 目标用户的用户名
      }
    },
    byLoginUser: {
      type: String,
      default: "0"
    }
  },
  emits: ['reply', 'delete'],
  setup(props, context) {
    const showReplyInput = ref(false);
    const replyContent = ref("");

    const replyIconClick = ()=> {
      showReplyInput.value = !showReplyInput.value;
      // if (showReplyInput.value) {
      //   document.getElementById("replyInput").focus();
      // }
    }

    const getReplyIconMessage = () => {
      if (showReplyInput.value) {
        return "取消回复";
      }
      else {
        return "回复"
      }
    }

    const router = useRouter();
    // 点击回复按钮
    const replyBtnClick = ()=> {
      currentLoginData((loginData)=> {
        // 判断是否登录
        if (loginData['isLogin']) {
          let replyTxt = replyContent.value.trim();
          if (replyTxt === "") {
            ElMessage.warning({
              message: "回复内容不能为空~",
              duration: 1000
            });
            return;
          }
          let user_id = loginData['user_id'];
          postCommentReply({
            comment_id: props.replyMessage.comment_id,
            user_from: user_id,
            user_to: props.replyMessage.userto_userId,
            cm_reply_content: replyTxt
          }).then(res=> {
            // 回复完成后提示并进行列表刷新
            ElMessage.success({
              message: "回复成功！",
              duration: 1000
            });
            context.emit("reply");
            showReplyInput.value = false;
          })
        }
        else {
          putLoginPrompt(router,"回复");
        }
      })
    }

    const isThumbUp = ref(false);
    const isThumbDown = ref(false);

    const thumbUpIconClick = ()=> {
      // 进行点赞
      if (!isThumbUp.value) {
        // 取消点踩
        if (isThumbDown.value)
          isThumbDown.value = false;
      }
      isThumbUp.value = !isThumbUp.value;
    }
    const thumbDownIconClick = ()=> {
      // 进行点踩
      if (!isThumbDown.value) {
        // 取消点赞
        if (isThumbUp.value)
          isThumbUp.value = false;
      }
      isThumbDown.value = !isThumbDown.value;
    }

    // 发送删除信号到父元素
    const deleteIconClick = ()=> {
      context.emit("delete");
    }

    return {
      getReplyIconMessage,
      showReplyInput,
      replyContent,
      replyIconClick,
      replyBtnClick,
      thumbUpIconClick,
      thumbDownIconClick,
      isThumbUp,
      isThumbDown,
      deleteIconClick,
    }
  }
}
</script>

<style scoped lang="scss">
.message-option-line {
  display: flex;
  flex-direction: row;
  padding-top: 5px;
  justify-content: space-between;
  .left-part {
    display: flex;
    flex-direction: row;
  }
  .right-part {
    padding-right: 15px;
  }
  .icon {
    width: 1em;
    height: 1em;
    position: relative;
    top: 2px;
  }
  .option {
    margin-right: 10px;
    color: #707070;
    &:hover {
      color: #8a9cb6;
      cursor: pointer;
    }
    &:last-child {
      margin-right: 0;
    }
    &.thumbUpActive {
      color: #409eff;
    }
    &.thumbDownActive {
      color: #dc4c40;
    }
    &.replyActive {
      color: #e6a23c;
    }
  }
}
.input_container {
  display: flex;
  flex-direction: row;
  //padding-top: 10px
}
</style>
